<template>
  <div class="clues-basicInfo">
    <div class="item-continer">
        <a-row :gutter="[24,24]" class="card-continer-row">
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <BaseInfoCard label="产品名称：" :value="userInfo?.product_name"/>
          </a-col>  
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <BaseInfoCard bgName="bg-02" label="资金需求：" 
             :value="userInfo?.loan_money">
               <span style="font-weight: 400;font-size: 16px; color: #333333;">元</span>
            </BaseInfoCard> 
          </a-col>  
        </a-row>  
     </div>
     <div class="item-continer">
        <a-row :gutter="[0, 20]">
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <ListGripTable label="职业"
             :labelBorder="[true,true,false,true]"
             :valueBorder="[true,true,true,false]"
             :value="getWorkName(userInfo?.work)"/>
            <ListGripTable label="花呗额度" 
             :labelBorder="[true,true,false,true]"
             :valueBorder="[false,true,true,false]"
              :value="userInfo?.huabei_quota"/>
            <ListGripTable label="白条额度" 
              :labelBorder="[true,true,true,true]"
              :valueBorder="[false,true,true,false]"
              :value="userInfo?.baitiao_quota"/>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <ListGripTable label="芝麻分" 
              :labelBorder="[true,true,true,false]"
              :valueBorder="[true,true,false,false]"
            :value="userInfo?.sesame_score"/>
            <ListGripTable label="信用状况" 
              :labelBorder="[false,true,true,false]"
              :valueBorder="[true,true,true,false]"
            :value="getCreditStatus(userInfo?.credit_status)"/>
            <ListGripTable label="资金需求" 
              :labelBorder="[false,true,true,false]"
              :valueBorder="[false,true,true,false]"
              :value="userInfo?.loan_money"/>
          </a-col>
      </a-row> 
     </div>
     <div class="item-continer">
        <a-row :gutter="[0, 24]">
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <ListGripTable label="车产" 
              :labelBorder="[true,true,false,true]"
              :valueBorder="[true,true,false,false]"
            :value="userInfo?.car" checkbox/>
            <ListGripTable label="房产" 
              :labelBorder="[true,true,true,true]"
              :valueBorder="[true,true,true,false]"
            :value="userInfo?.house" checkbox/>
            <ListGripTable label="公积金" 
              :labelBorder="[false,true,true,true]"
              :valueBorder="[false,true,true,false]"
            :value="userInfo?.accumulation_fund" checkbox/>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <ListGripTable label="社保" 
              :labelBorder="[true,true,true,false]"
              :valueBorder="[true,true,true,false]"
            :value="userInfo?.social_security" checkbox/>
            <ListGripTable label="保单" 
              :labelBorder="[false,true,true,false]"
              :valueBorder="[false,true,true,false]"
              :value="userInfo?.insurance" checkbox/>
            <ListGripTable label="企业主" 
              :labelBorder="[false,true,true,false]"
              :valueBorder="[false,true,true,false]"
              :value="userInfo?.business_owner" checkbox/>
          </a-col>
      </a-row> 
     </div> 
  </div>
</template>

<script setup lang="ts">
import BaseInfoCard from '@/views/clues/components/baseInfoCard.vue'
import ListGripTable from '@/views/clues/components/listGripTable.vue'
import type { ClueItem } from '@/api/clues'
import { ref , reactive, PropType} from 'vue';
import { useDictStore } from '@/store'

const dictStore = useDictStore();
let props = defineProps({
     userInfo: {
      type: Object as PropType<ClueItem>,
      default: ()=> null
     }
})

const getWorkName = (code: string)=>{
   return dictStore.getClueWorkList[code] || ''
}

const getCreditStatus = (code: string)=>{
   return dictStore.getCreditStatusByCode(code) || '未知'
}

</script>

<style scoped lang='less'>
  .item-continer{
    margin-bottom: 20px;
  }
</style>